<!-- 我的资产 -->
<template>
	<view>
		<view class="top">
			<view class="bgc">
				<!-- 文字 -->
				<view class="txt">
					<view class="t1">
						<text>账户余额(元)</text>
					</view>
					<view class="t2">
						<text>{{totalMoney.userTotalMoney}}</text>
					</view>
				</view>
				<!--图表盒子-->
				<view class="chart-content">
					<!-- 三角 -->
					<view class="sanjiao"></view>
					<!-- 图标 -->
					<view class="chart-msg">
						<!-- 左边 -->
						<view class="left">
							<!-- 每一项 -->
							<block v-for="item in moneydata" :key='item.name'>
								<view class="index">
									<text class="t1">{{item.name}}</text>
									<text :style="'color:'+item.color+';'" class="t2">{{item.money}}</text>
									<view :style="'border: solid 2rpx '+item.color+';background-color: '+item.color+';'"
										class="garden"></view>
								</view>
							</block>

						</view>
						<!-- 右边 图表-->
						<view class="right">
							<view class="content">
								<view class="charts-box">
									<qiun-data-charts type="pie" :chartData="PieA" />
								</view>
							</view>
						</view>
					</view>

					<!-- 按钮 -->
					<view class="btn-content">
						<view @click="show = true" class="left-btn">
							<text>充值</text>
						</view>
						<view @click="show2 = true" class="right-btn">
							<text>提现</text>
						</view>
						<!-- 竖线 -->
						<view class="xian">
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bar">
			<view class="title">
				我的持有
			</view>
			<!-- 列表 -->
			<view class="bd">
				<!-- 头部 -->
				<view class="title">
					<view style="text-align: left;">名称</view>
					<view style="text-align: center;">持有收益(元)</view>
					<view style="text-align: right;">昨日收益(元)</view>
				</view>
				<block v-for="item in data2" :key='item.name'>
					<view class="content">
						<view style="color: #2e3033; text-align: left;" class="t1">{{item.name}}</view>
						<view style="color:#2e3033 ; text-align: center;" class="t2">{{item.money}}</view>
						<view style="color: #e74d45; text-align: right;" class="t3">{{item.top}}</view>
					</view>
				</block>
			</view>
			<view class="food">
				已展示全部
			</view>
		</view>


		<!-- 充值弹出 -->
		<view class="pay">
			<u-popup mode="bottom" v-model="show">
				<view class="title">选择充值方式</view>
				<!-- 支付选项 -->
				<u-radio-group v-model="value">
					<block v-for="item in payData" :key='item.name'>
						<view class="mark">
							<u-icon style="position: absolute;left: 30rpx; top: 40rpx;" size="50rpx" :color="item.color"
								:name="item.icon"></u-icon>
							<view style="margin-left: 100rpx; font-size: 35rpx;">{{item.name}}<text
									v-if="item.money">￥({{item.money}})</text></view>
							<u-radio @change="radioChange" :name="item.name" active-color="#ED8642"></u-radio>
						</view>
					</block>
				</u-radio-group>
				<view @click="topUp2" class="p-btn">
					充值
				</view>
			</u-popup>
		</view>
		<!-- 输入金额 -->
		<view>
			<u-popup negative-top="500" border-radius="12" mode="center" v-model="money4" :closeable="true"
				close-icon-size="16" close-icon-pos="top-left">
				<view class="money_box">
					<text class="mey_nav">请输入金额</text>
					<u-input :clearable='false' placeholder='请输入金额' v-model="balance" :type="type" :border="border" />
					<u-button @click="pay2" type="primary" size="medium">确认</u-button>
				</view>
			</u-popup>
		</view>
		<!-- 输入密码 -->
		<view>
			<u-popup negative-top="500" border-radius="12" mode="center" v-model="money3" :closeable="true"
				close-icon-size="16" close-icon-pos="top-left">
				<view class="money_box">
					<text class="mey_nav">请输入支付密码</text>
					<u-message-input :clearable='false' v-model="psw" class="inpts" mode="box" :breathe="true"
						:focus="true" width="56" :maxlength="6" font-size="24" :bold="false" @finish="finish">
					</u-message-input>
					<text class="mey_btm">忘记密码？</text>
				</view>
			</u-popup>
		</view>


		<u-toast ref="uToast" />
		<!-- 提现弹出 -->
		<view class="pay">
			<u-popup mode="bottom" v-model="show2">
				<view class="title">选择提现方式</view>
				<!-- 支付选项 -->
				<u-radio-group v-model="value">
					<block v-for="item in payData" :key='item.name'>
						<view class="mark">
							<u-icon style="position: absolute;left: 30rpx; top: 40rpx;" size="50rpx" :color="item.color"
								:name="item.icon"></u-icon>
							<view style="margin-left: 100rpx; font-size: 35rpx;">{{item.name}}<text
									v-if="item.money">￥({{item.money}})</text></view>
							<u-radio @change="radioChange" :name="item.name" active-color="#ED8642"></u-radio>
						</view>
					</block>
				</u-radio-group>
				<view @click="topUp" class="p-btn">
					提现
				</view>
			</u-popup>
		</view>
		<!-- 输入金额 -->
		<view>
			<u-popup negative-top="500" border-radius="12" mode="center" v-model="money" :closeable="true"
				close-icon-size="16" close-icon-pos="top-left">
				<view class="money_box">
					<text class="mey_nav">请输入金额</text>
					<u-input :clearable='false' placeholder='请输入金额' v-model="balance" :type="type" :border="border" />
					<u-button @click="pay" type="primary" size="medium">确认</u-button>
				</view>
			</u-popup>
		</view>
		<!-- 提现输入密码 -->
		<view>
			<u-popup negative-top="500" border-radius="12" mode="center" v-model="money2" :closeable="true"
				close-icon-size="16" close-icon-pos="top-left">
				<view class="money_box">
					<text class="mey_nav">请输入支付密码</text>
					<u-message-input :clearable='false' v-model="psw" class="inpts" mode="box" :breathe="true"
						:focus="true" width="56" :maxlength="6" font-size="24" :bold="false" @finish="finish2">
					</u-message-input>
					<text class="mey_btm">忘记密码？</text>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"user"
	);
	export default {
		async onLoad(options) {
			let result = await this.getUserWallet(options)
			console.log(result);
			this.userId = options.userId
			this.totalMoney = {
				...result.data
			}

			this.moneydata = [{
					name: '基金',
					money: result.data.fundMoney,
					color: '#7497fd'
				},
				{
					name: '黄金',
					money: result.data.goldMoney,
					color: '#91CB74',
				},
				{
					name: '余额',
					money: result.data.balance,

					color: '#f1a721'
				},
			]
			this.PieA = {
				"series": [{
					"data": [{
						"name": "基金",
						"value": +result.data.fundMoney
					}, {
						"name": "黄金",
						"value": +result.data.goldMoney
					}, {
						"name": "余额",
						"value": +result.data.balance
					}]
				}]
			}
			this.payData = [{
					name: '余额',
					color: '#F4CA57',
					money: result.data.balance,
					icon: 'rmb-circle-fill'
				},
				{
					name: '支付宝',
					color: '#4C88C8',
					icon: 'zhifubao-circle-fill'
				},
				{
					name: '信用卡',
					color: '#F4CA57',
					icon: 'coupon-fill'
				},
				{
					name: '微信',
					color: '#55AC4F',
					icon: 'weixin-fill'
				}
			]

		},
		data() {
			return {
				money: false,
				money2: false,
				money3: false,
				money4: false,
				totalMoney: {},
				value: '余额',
				show: false,
				show2: false,
				moneydata: [],
				PieA: {},
				data2: [{
						name: '华夏海外债券',
						money: 187.62,
						top: +23.12
					},
					{
						name: '华夏海外债券',
						money: 187.62,
						top: +23.12
					},
					{
						name: '华夏海外债券',
						money: 187.62,
						top: +23.12
					},
					{
						name: '华夏海外债券',
						money: 187.62,
						top: +23.12
					},
				],
				payData: [],

				balance: '',
				psw: '',
				userId: 0

			}
		},
		methods: {
			...mapActions(['getUserWallet', 'userCashIn', 'userCashOut']),
			radioChange(e) {},

			topUp() {
				this.money = !this.money
				this.show = false
				this.show2 = false
			},

			pay() {
				if (this.balance < 100 || this.balance % 2 != 0) {
					this.$refs.uToast.show({
						title: '金额需大于100，并且为100的倍数',
						type: 'warning',
					})
				} else {
					this.money = !this.money
					this.show = false
					this.show2 = false
					this.money2 = !this.money2
				}
			},


			topUp2() {
				this.money4 = !this.money4
				// this.show = false
				// this.show2 = false
			},

			pay2() {
				if (this.balance < 100 || this.balance % 2 != 0) {
					this.$refs.uToast.show({
						title: '金额需大于100，并且为100的倍数',
						type: 'warning',
					})
				} else {
					this.money3 = !this.money3
				}
			},

			// 充值
			async finish(e) {
				let data = {
					balance: this.balance,
					payPassWord: e,
					userId: this.userId
				}
				let result = await this.userCashIn(data)
				console.log(result);
				if (result.code) {
					this.money2 = false
					this.$refs.uToast.show({
						title: '充值成功！',
						type: 'success',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my'
						})
					}, 1500)
				}
			},
			// 提现
			async finish2(e) {
				let data = {
					balance: this.balance,
					payPassWord: e,
					userId: this.userId
				}
				let result = await this.userCashOut(data)
				if (result.code) {
					this.money2 = false
					this.$refs.uToast.show({
						title: '提现成功！',
						type: 'success',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my'
						})
					}, 1500)
				}
			}
		},

	}
</script>

<style scoped lang="scss">
	@import 'css/payment_Bthree';

	.top {
		width: auto;

		.bgc {
			background: url('/static/image/img_bg_wode.png') no-repeat;
			background-size: 100% 70%;

			.txt {
				width: 100vw;
				height: 150rpx;

				.t1 {
					margin: 0 auto;
					width: 145rpx;
					height: 34rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-bottom: 34rpx;
				}

				.t2 {
					width: 100%;
					height: 58rpx;
					font-family: DIN;
					font-size: 48rpx;
					line-height: 58rpx;
					letter-spacing: 0rpx;
					color: #ffffff;
					text-align: center;
				}
			}
		}

		.chart-content {
			margin: 58rpx auto;
			width: 672rpx;
			height: 365rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			position: relative;

			.sanjiao {
				top: -50rpx;
				left: 46%;
				position: absolute;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 20px 34.6px 20px;
				border-color: transparent transparent #FFFFFF transparent;
			}
		}

		// 
		.chart-msg {
			display: flex;
			justify-content: space-between;

			.left {
				width: 320rpx;
				height: 310rpx;
				padding: 40rpx 0 0 20rpx;

				// 每一项样式
				.index {
					position: relative;
					width: 206rpx;
					height: 38rpx;
					margin-bottom: 58rpx;

					.garden {
						position: absolute;
						top: 16.5rpx;
						left: 20rpx;
						width: 20rpx;
						height: 20rpx;
						border-radius: 20rpx;

					}

					.t1 {
						margin-left: 55rpx;
						font-size: 24rpx;
					}

					.t2 {
						position: absolute;
						left: 120rpx;
						font-size: 32rpx;
					}
				}

			}

			.right {
				width: 320rpx;
				height: 310rpx;
				border: 1px soli;

				.content {
					width: 100%;
					height: 100%;
				}

				.charts-box {
					width: 320rpx;
					height: 310rpx;
				}
			}
		}

		// 按钮
		.btn-content {
			width: 100%;
			height: 62rpx;
			background-color: #3775f6;
			border-radius: 0rpx 0rpx 12rpx 12rpx;
			display: flex;
			justify-content: space-between;
			line-height: 62rpx;
			position: relative;

			.left-btn {
				width: 328rpx;
				height: 64rpx;
				text-align: center;
				font-size: 32rpx;
				color: #F1F1F1;
			}

			.right-btn {
				width: 328rpx;
				height: 64rpx;
				text-align: center;
				font-size: 32rpx;
				color: #F1F1F1;
			}

			.xian {
				top: 6rpx;
				left: 50%;
				position: absolute;
				width: 3rpx;
				height: 50rpx;
				background-color: #F1F1F1;
			}
		}
	}

	.bar {
		padding: 40rpx;
		margin: 0 auto;
		width: 670rpx;
		height: 528rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(225, 225, 225, 0.2);
		border-radius: 12rpx;

		.title {
			width: 128rpx;
			height: 44rpx;
			font-family: PingFang SC;
			font-size: 32rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 44rpx;
			letter-spacing: 0rpx;
			color: #2a2d32;
			margin-bottom: 40rpx;
		}

		.bd {

			.title,
			.content {
				margin-top: 24rpx;
				width: 590rpx;
				height: 62rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: solid 1rpx #cacaca;

				view {
					width: 190rpx;
					height: 62rpx;
					font-family: PingFang SC;
					font-size: 24rpx;
					line-height: 34rpx;
					letter-spacing: 0rpx;
					color: #bcc3cd;
				}
			}



		}

		.food {
			margin: 20rpx auto;
			width: 120rpx;
			height: 34rpx;
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 34rpx;
			letter-spacing: 0rpx;
			color: #bcc3cd;
		}
	}

	.pay {
		background-color: #232323;

		.title {
			width: 100%;
			height: 100rpx;
			font-size: 30rpx;
			line-height: 100rpx;
			text-align: center;
			font-weight: 700;
			border-bottom: 1px solid #F1F1F1;
		}

		.mark {
			width: 100%;
			height: 130rpx;
			font-size: 30rpx;
			line-height: 130rpx;
			text-align: center;
			font-weight: 700;
			border-bottom: 1px solid #F1F1F1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

		}

		.p-btn {
			margin: 0 auto;
			background-color: #1380FF;
			width: 500rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-weight: 700;
			border-radius: 12rpx;
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			font-size: 40rpx;
			margin-bottom: 40rpx;
		}
	}
</style>
